<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 导入css-->
   <link rel="stylesheet" href="../static/css/bootstrap.css" />
   <!-- 导入3个js,有顺序要求-->
   <script src="../static/js/bootstrap.min.js"></script>
   <script src="../static/js/jquery.min.js"></script>
   <link rel="stylesheet" href="../static/css/index.css" />
  <title>Document</title>
</head>

<body>
  <div class="body">
    <table class="div1">
      <tr>
        <td>
          <button class="btns">取出</button>
        </td>
        <td>
          <table class="tabled">
            <tr>
              <td>患者姓名：<input type="text" class="inputs"></td>
              <td>科室：<input type="text" class="inputs"></td>
              <td>病历号：<input type="text" class="inputs"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table id="tab1" border='1' width="500px">
      <thead>
        <tr>
          <th>编号</th>
          <th>药品名称</th>
          <th>取出数量</th>
          <th>合计</th>
          <th>患者签字</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td>
          <td>560001</td>
          <td>560001</td>
        </tr>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td>
          <td>560001</td>
          <td>560001</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    window.onload = function () {
        var oTab = document.getElementById('tab1');
        for (var i=0; i<oTab.tBodies[0].rows.length; i++){
            if(i%2){
                oTab.tBodies[0].rows[i].style.background='#e9edf4';
            }else {
                oTab.tBodies[0].rows[i].style.background='#d0d8e8';
            }
        }
    }
</script>
  <style>
    /* .body {
      width: 600px;
      height: 300px;
      border: 1px solid rgb(221, 115, 15);
      margin: 0 auto;
      background-color:#f79646;
    } */
    /* .tabled {
      margin-top: 3%;
      margin-left: 10px;
    } */

    .inputs {
      outline: none;
      border: none;
      border-bottom: 1px solid #000;
      background-color: #f79646;
      width: 50%;
    }
    /* .btns {
      margin-top: 10px;
      margin-left: 20px;
      text-align: center;
      width: 90px;
      height: 35px;
      font-weight: bold;
      color: #fff;
      border: 2px solid #ffffff;
      font-size: 18px;
      background-color:#4aabc5;
    } */
    #tab1{
      text-align: center;
      border: 1px solid #fff;
      margin-top: 30px;
      margin: 30px auto 0 auto;
    }
    #tab1 thead{
      background-color: #4f81bd;
      color: #fff;
    }

  </style>
</body>

</html>